<template>
    <div class="my-aside flex-col">
        <div class="title-box">{{ routeTitle }}</div>
        <div class="mexu-box">
            <my-route-menu :route="routeLevel1" :default-active="routeLevel2"></my-route-menu>
        </div>
    </div>
</template>

<script setup lang="ts">
const { routeLevel1, routeLevel2, routeTitle } = storeToRefs(MyStore.useApp());
</script>

<style scoped>
.my-aside {
    height: 100%;
    width: 100%;
    padding: 16px 8px;
    gap: 16px;
}
.title-box {
    width: 100%;
    font-size: 14px;
    text-align: center;
}
</style>
